// pages/feedback/index.js
Page({

 
  data: {
    tabs:[
      {
        id:0,
        value:"体验问题",
        isActive:true
      },
      {
        id:1,
        value:"商品、商家投诉",
        isActive:false
      }
    ],
    //被选中的图片路径渲染
    chooseImgs:[],
    //文本域内容
    textVal:""
  },

  //外网的图片路径数组
  UpLoadImgs:[],



  //标题点击事件 从子组件而来
  handleTabsItemChange(e){
    const {index}=e.detail;

    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

    this.setData({
      tabs
    })
  },

  //点击“+”选择图片事件
  handleChooseImg(){
    //调用小程序内置的选择图片api
    wx.chooseImage({
      //同时选中的图片数量
      count: 9,
      //图片格式 原图 压缩
      sizeType: ['original','compressed'],
      //图片的来源 相册 照相机
      sourceType: ['album','camera'],
      success: (result)=>{
        this.setData({
          // 图片数组进行拼接 
          chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
        })
      }
    });
  },

  //点击自定义图片组件 删除
  handleRemoveImg(e){
    //获取被点击的组件的索引
    const {index}=e.currentTarget.dataset;
    //获取data中的图片数组
    let {chooseImgs}=this.data;
    //删除元素
    chooseImgs.splice(index,1);

    this.setData({
      chooseImgs
    })
  },

  //文本域的输入事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },

  //提交按钮的点击事件
  handleFormSubmit(){
    //获取文本域的内容 图片数组
    const {textVal,chooseImgs}=this.data;
    //合法性验证
    if(!textVal.trim()){
      //不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      });
      return;
    }
    //准备上传图片到专门的图片服务器
    //此api不支持多个文件同时上传 解决：遍历数组 挨个上传
    //显示正在等待图标
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });

    //判断有没有需要上传的图片数组
    if(chooseImgs.length!=0){
        chooseImgs.forEach((v,i)=>{
        
        wx.uploadFile({
          //图片上传到哪里
          url: 'https://img.coolcr.cn/api/upload',
          //被上传的文件的路径
          filePath: v,
          //上传的文件名称 以便后台获取文件 file B站评论区:image
          name: "image",
          //顺带的文本信息
          formData: {},
          success: (result) => {
            console.log(result);
            let url=JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);

            //所有图片都上传完毕触发的代码
            if(i===chooseImgs.length-1){
              //
              wx.hideLoading();
                

              console.log("把文本和图片数组提交到后台中");
              //提交成功
              //重置页面
              this.setData({
                textVal:"",
                chooseImgs:[]
              })
              //返回上一页面
              wx.navigateBack({
                delta: 1
              });
                
            }
          }
        });
      })
    }else{
      wx.hideLoading();
        
      console.log("只是提交了文本");

      wx.navigateBack({
        delta: 1
      });
        
    }

    
      
  }
 
})